<template>
  <view class="mine">

    <!-- Profile Section -->
    <view class="profile-section">
      <view class="profile-card">
        <view class="avatar">
          <uni-icons type="person" size="48" color="#64b5f6"></uni-icons>
        </view>
        <view class="profile-info">
          <text class="username">用户名</text>
          <text class="email">user@example.com</text>
        </view>
      </view>
    </view>

    <!-- Stats Section -->
    <view class="stats-section">
      <text class="section-title">数据统计</text>
      <view class="decor-line"></view>
      <view class="stats-grid">
        <view class="stat-card">
          <text class="stat-value">128</text>
          <text class="stat-label">笔记数量</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">36</text>
          <text class="stat-label">完成任务</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">98%</text>
          <text class="stat-label">完成率</text>
        </view>
      </view>
    </view>

    <!-- Action Buttons -->
    <view class="action-buttons">
      <view class="action-button" @click="navigateToSettings">
        <uni-icons type="gear" size="24" color="#64b5f6"></uni-icons>
        <text>通用设置</text>
      </view>
      <view class="action-button" @click="navigateToAbout">
        <uni-icons type="info" size="24" color="#64b5f6"></uni-icons>
        <text>关于我们</text>
      </view>
      <view class="action-button" @click="navigateToVersion">
        <uni-icons type="info" size="24" color="#64b5f6"></uni-icons>
        <text>版本信息</text>
      </view>
      <view class="action-button" @click.stop="confirmLogout">
        <uni-icons type="redo" size="24" color="#64b5f6"></uni-icons>
        <text>退出登录</text>
      </view>
    </view>

    <BottomNav activeTab="mine" />
  </view>
</template>

<script>
import BottomNav from '@/components/BottomNav.vue'

export default {
  components: { BottomNav },
  data() {
    return {

    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    navigateToSettings() {
      uni.navigateTo({
        url: '/pages/settings/index'
      })
    },
    navigateToAbout() {
      uni.navigateTo({
        url: '/pages/about/index'
      })
    },
    navigateToVersion(){
      uni.navigateTo({
        url: '/pages/version/index'
      })
    },
    confirmLogout() {
      uni.navigateTo({
        url: "/pages/login/index"
      })
      /**uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        confirmColor: '#ff6b6b',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('token')
            uni.navigateTo({
              url: '/pages/login/index'
            })
          }
        },
        fail: (err) => {
          console.error('Modal failed to show:', err)
        }
      })**/
    }
  }
}
</script>

<style scoped lang="scss">
.mine {
  min-height: 100vh;
  padding: 24px;
  background: linear-gradient(180deg, rgba(100,181,246,0.05) 0%, rgba(255,255,255,1) 100%);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(180deg, rgba(100,181,246,0.1) 0%, rgba(100,181,246,0) 100%);
    z-index: 0;
  }
}

.profile-section {
  margin-bottom: 32px;
}

.profile-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(100,181,246,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(100,181,246,0.08);
  display: flex;
  align-items: center;
  gap: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(100,181,246,0.15);
    border-color: rgba(100,181,246,0.12);
  }
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(100,181,246,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.username {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
}

.email {
  font-size: 14px;
  color: #8e8e93;
}

.stats-section {
  margin-bottom: 32px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 6px 32px rgba(100,181,246,0.08);
  border: 1px solid rgba(100,181,246,0.12);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(100,181,246,0.15);
    border-color: rgba(100,181,246,0.2);
  }
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #64b5f6;
  display: block;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #8e8e93;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  box-shadow: 0 6px 32px rgba(100,181,246,0.08);
  border: 1px solid rgba(100,181,246,0.12);
  transition: all 0.3s ease;
  cursor: pointer;
  user-select: none;
  
  &:hover {
    background: rgba(100,181,246,0.08);
    transform: translateY(-2px);
  }
  
  &:active {
    transform: translateY(0);
  }
}
</style>
